<template>
  <div class="windowCodeMirrorComponent">
    <codemirror
        ref="codemirror"
        v-model="editFileStrShow"
        placeholder="Code goes here..."
        :style="{ height: height + 'px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="2"
        :extensions="extensions"
        :extraKeys="{Ctrl: 'autocomplete'}"
    />
  </div>

</template>

<script>
import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'
import {oneDark} from '@codemirror/theme-one-dark'

export default {
  name: "windowCodeMirrorComponent",
  props: {
    editFileStr: String,
    height: Number,
  },
  components: {
    Codemirror
  },
  data() {
    return {
      editFileStrShow: "",
      extensions: [javascript(), oneDark],
    }
  },
  methods: {},
  mounted() {
    this.editFileStrShow = this.editFileStr
  },
  watch: {
    editFileStr: function (newValue) {
      this.editFileStrShow = newValue
    }
  }
}
</script>

<style scoped>
.windowCodeMirrorComponent {
  height: 100%;
  width: 100%;
}
</style>